HTML Tags Explained

One of the most popular programming languages is as you probably know HTML which is a language that allows you to create websites. In HTML you use elements called tags, each tag has a specific function for Example the h1 tag is the main heading on a page. In this article you'll discover all the necessary tags and their functions.

Semantic HTML

What is Semantic HTML

Semantic HTML was introduced with Web 3.0 with it came many innovations to the existing HTML, semantic HTML makes it easier to differentiate different components of a web page.

Nav

The nav tag is used to display that this is a navbar in a more readable way than making a .nav class.

        
            <nav>
                <ul>
                </ul> 
            </nav>
        
    
    

Header

The header element is used to define that part of a page is the header section making the HTML more readable.

    
        <header>

            <nav>
            </nav>

        </header>
    
   

Footer

The footer element defines that part of a page is the footer making it more readable and saving work for web devs.

    
        <footer>

            <ul>
            </ul> 

        </footer>
    
   

Code

The code tag displays a piece of text in the monospace font and also makes it easier to read because you don't have to make a .code class. The code below will display the word "hello" in monospace.

        
            <code>
                Hello
            </code>
        
    

Section

The section tag signifies that there is a big section of code in it. Usually sections come before divs in the hierarchy. Sections tend to have a class.

Here is an example of a section:

        
            <section class="exampleclass"></section>
        
    

Common Elements

Common elements are HTML elements that are relevant to any websites, from one-pagers to giant business websites these elements have their place in the website.

Paragraph

The Paragraph element is frequently used to display content on web pages and is very useful when writing blog posts like this one. The followning code will display "Hello My Friend".

        
            <p>Hello My Friend</p>
        
    

Headings

The Heading tags display the different sized text on web pages. In total there are 6 headings: h1, h2, h3, h4, h5 and h6, but h5 and h6 aren't usually used that much.

        
            <h1>Hello</h1>
            <h2>Hello</h2>
            <h3>Hello</h3>
            <h4>Hello</h4>
            <h5>Hello</h5>
            <h6>Hello</h6>

        
    

Divs

Divs are the very core of HTML and structure it so that it is easier to navigate. Divs usually are given a class or id so that people can understand everything better.

Here is and example of a div:

        
            <div class="exampleclass"></div>
        
    

Lists

Lists are defined by two ul or ol tags. Ul means that the list is unordered and ol means ordered. Inside the list there are li tags

this is an unordered list:

            
                <ul>
                <li>Something</li>
                </ul>
            
        

this is an ordered list:

            
                <ol>
                <li>Something</li>
                </ol>
            
        

Media

Here you will learn how to place media into your website such as images, videos and links

Anchor Tags

Anchor tags are links that transfer the user to another webpage either an html file stored on the server or to another url and domain.

This is an anchor tag linking internally:

            
                <a href="index.html">index.html</a>
            
        

this is an anchor tag linking externally:

            
                <a href="https://google.com">google</a>
            
        

Videos

Videos are fairly simple to display, write the video tag and then a src attribute inside it, I also recommend having a width and a height attribute so that it won't go out of control.The <video> tag is a self closing tag.

here is an example of a video:

            
                <video src="example.mp4">
            
    

Images

Images are very similar to videos in terms of syntax. Don't forget the height and width attributes.

Here is an example of an Image:

        
            <img src="example.jpeg">